<script setup lang="ts">
import { ref, toRefs, computed, toRef, watch, onMounted } from "vue";
import { onShow, onHide, onLoad } from "@dcloudio/uni-app";
import _ from "lodash";

let props = defineProps(["visible", "title", "showTitle", "styleRef"]);
let emit = defineEmits(["update:visible", "cancel", "ok"]);
let { title, showTitle, styleRef } = toRefs(props);
let visible = toRef(props, "visible");

let handleCancel = () => {
  emit("update:visible", false);
  emit("cancel");
};

let handleOk = () => {
  emit("update:visible", false);
  emit("ok");
};
</script>

<template>
  <div class="modal-box" v-if="visible">
    <div
      class="modal-content"
      :style="{
        background: styleRef ? styleRef.background : '#fff',
      }"
    >
      <div class="modal-title" v-if="showTitle">{{ title }}</div>

      <div class="scroll-wrap">
        <!-- <scroll-view scroll-y="true" class="scroll-Y">
         
        </scroll-view> -->
        <slot></slot>
      </div>

      <div class="modal-btns">
        <span class="btn-cancel" @click="handleCancel"> 取消 </span>
        <span class="btn-ok" @click="handleOk"> 确定 </span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.modal-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  width: 680rpx;
  // height: 70%;
  border-radius: 16rpx;
  // background: #f4f4f4;
  background: #fff;
  display: flex;
  flex-direction: column;
  // padding: 0 30rpx;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  z-index: 99;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.modal-title {
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 34rpx;
  color: #303133;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 36rpx;
  padding-bottom: 35rpx;
}

.scroll-wrap {
  // flex: 1;
  // overflow: hidden;
  border-radius: 16rpx;
  box-sizing: border-box;
}
.scroll-Y {
  // height: 100%;
  background: #fff;
  padding: 0;
  box-sizing: border-box;
}

.modal-btns {
  padding: 0 34rpx;
  padding-bottom: 31rpx;
  padding-top: 33rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.btn-cancel {
  width: 288rpx;
  height: 98rpx;
  background: #ffffff;
  border-radius: 49rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #666666;
  border: 2rpx solid #e4e4e4;
  box-sizing: border-box;
}
.btn-ok {
  width: 288rpx;
  height: 98rpx;
  background: #3973ff;
  border-radius: 49rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: PingFangSC, PingFang SC;
  font-weight: bold;
  font-size: 32rpx;
  color: #ffffff;
}
</style>
